<template>
	<view class="participant-item" :class="{ 'pending' : Info.registrationStatus === 1 }">
		<view class="participant-avatar">
			<up-image :src="Info.user?.avatar || `/static/svg/avatar.svg`" width="60px" height="60px"
				shape="circle"></up-image>
		</view>
		<view class="participant-name">{{ Info.realName }}</view>
		<Tag text="九号新星" name="expert" />
		<view class="participant-status" :class="{
			'confirm' : Info.registrationStatus === 2,
			'waiting' : Info.registrationStatus === 1
		}"> {{ Info.registrationStatus === 1 ? '待审核': '已确认' }} </view>
	</view>
</template>

<script setup>
	import Tag from './Tag.vue';

	const props = defineProps({
		Info: {
			type: Object,
			default: () => ({})
		}
	})
</script>

<style lang="scss" scoped>
	.participant-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
		border-radius: 16px;
		border: 1px solid rgba(226, 232, 240, 0.8);
		transition: all 0.3s ease;

		&.pending {
			opacity: 0.7;
			border: 1px dashed #f59e0b;
		}

		.participant-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			margin-bottom: 12px;
			border: 3px solid white;
			box-shadow: 0 4px 12px #00000026;
		}

		.participant-name {
			font-size: 12px;
			color: #1e293b;
			margin-bottom: 8px;
			font-weight: 600;
			line-height: 1.3;
		}

		.participant-status {
			font-size: 10px;
			line-height: 1.3;
			margin-top: 8px;

			&.confirm {
				color: #10b981;
			}

			&.waiting {
				color: #f59e0b;
			}
		}
	}
</style>